import 'package:auto_route/auto_route.dart';
import 'package:casdon/app/config/theme/theme_extention.dart';
import 'package:casdon/auto_router.dart';
import 'package:casdon/build_gen/assets.gen.dart';
import 'package:casdon/common/widget/common_app_bar.dart';
import 'package:casdon/common/widget/common_loading_widget.dart';
import 'package:casdon/modules/me/application/notification/service_order_notifier.dart';
import 'package:casdon/modules/me/data/api/service_order_api.dart';

import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

@RoutePage()
class ServiceOrderListScreen extends ConsumerWidget {
  const ServiceOrderListScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final servicesAsync = ref.watch(serviceOrderNotifierProvider);

    return Scaffold(
      backgroundColor: context.colorScheme.surface,
      appBar: CommonAppBar(title: '服务列表'),
      body: servicesAsync.when(
        loading: () => Center(child: const CommonLoadingWidget()),
        error: (error, stack) => _buildEmptyState(context),
        data: (services) => services.data.isEmpty
            ? _buildEmptyState(context)
            : _buildContent(context, ref, services.data),
      ),
    );
  }

  Widget _buildEmptyState(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image(
            image: Assets.images.emptyData.provider(),
            width: 106.w,
            height: 68.w,
          ),
          SizedBox(height: 16.h),
          Text(
            "暂无数据",
            style: context.textTheme.bodyMedium!.copyWith(
              color: context.customColorThemeNonNull.textColor2,
            ),
          ),
          SizedBox(height: 200.h),
        ],
      ),
    );
  }

  Widget _buildContent(
    BuildContext context,
    WidgetRef ref,
    List<ServiceOrder> services,
  ) {
    return SingleChildScrollView(
      padding: EdgeInsets.only(left: 16, top: 0, right: 16, bottom: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 24),
          ...services
              .map(
                (service) => Padding(
                  padding: EdgeInsets.only(bottom: 16),
                  child: GestureDetector(
                    onTap: () => _pushDetailScreen(context, service),
                    child: _buildServiceSection(service, context),
                  ),
                ),
              )
              .toList(),
        ],
      ),
    );
  }

  Widget _buildServiceSection(ServiceOrder service, BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 8,
            offset: Offset(0, 2),
          ),
        ],
      ),
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            service.serviceType,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: service.serviceTypeColor,
            ),
          ),
          SizedBox(height: 12),
          _buildInfoRow('工单号', service.orderNumber),
          _buildInfoRow('产品型号', service.product.productName),
          _buildInfoRow('创建时间', service.createTime), // 2025-11-05 10:00:00
          SizedBox(height: 8),
          Container(
            padding: EdgeInsets.all(12), // 内边距
            decoration: BoxDecoration(
              color: context.customColorThemeNonNull.gray1, // 灰色背景
              borderRadius: BorderRadius.circular(8), // 圆角
            ),
            child: Row(
              children: [
                // 绿色圆形指示器
                Container(
                  width: 8,
                  height: 8,
                  decoration: BoxDecoration(
                    color: context.customColorThemeNonNull.gray6,
                    shape: BoxShape.circle,
                  ),
                ),
                SizedBox(width: 8),
                // 步骤描述文本
                Text(
                  service.status,
                  style: context.textTheme.bodyMedium!.copyWith(
                    color: context.customColorThemeNonNull.textColor2,
                  ),
                ),
                Spacer(),
                // 时间文本
                Text(
                  service.modeifieTime,
                  style: context.textTheme.bodyMedium!.copyWith(
                    color: context.customColorThemeNonNull.textColor2,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildInfoRow(String title, String content) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 4),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Container(
            width: 80,
            child: Text(
              title,
              style: TextStyle(fontSize: 14, color: Colors.grey),
            ),
          ),

          Expanded(
            child: Text(
              content,
              textAlign: TextAlign.right,
              style: TextStyle(fontSize: 14, color: Colors.black),
            ),
          ),
        ],
      ),
    );
  }

  void _pushDetailScreen(BuildContext context, ServiceOrder service) {
    // 通过 extra 传递完整数据模型
    ServiceOrderDetailRoute(order: service).push(context);
  }
}
